<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bin动态绑定style</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <!-- 动态绑定的方式:行内样式 -->
        <!-- <h2 :style="{fontSize:'50px'}">style绑定</h2> -->

        <!-- 对象语法 -->
        <h2 :style="{fontSize:fontSize+'px'}">styleObj</h2>

        <!-- 数组语法 -->
        <h2 :style="[fontSizeArr,color]">styleArr</h2>
    </div>

    <script src="../vue/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                fontSize:100,
                fontSizeArr:{fontSize:'50px'},
                color:{color:'red'}
            },
            methods: {
                changeColor(){
                    this.isactive = !this.isactive;
                }
            },
        });
    </script>
</body>
</html>